<script setup lang="ts">
const menuData = useMenuData()
const menu = menuData.value.slice(1)
</script>

<template>
  <div class="footer">
    <div class="content">
      <div class="logo-wrap">
        <img class="logo" src="https://public-oss-file.zmaxfilm.com/website-compress/logo.png" alt="logo">
      </div>
      <div class="nav">
        <div class="left">
          <template v-for="(item, index) in menu">
            <div v-if="!item.footerHide" :key="index" class="nav-col">
              <NuxtLink :to="item.route">
                <span class="nav-text nav-text--main">{{ item.title }}</span>
              </NuxtLink>
              <template v-for="(child, cindex) in item.child" :key="cindex">
                <NuxtLink :to="child.route">
                  <span v-if="!child.footerHide" class="nav-text">{{ child.title }}</span>
                </NuxtLink>
              </template>
            </div>
          </template>
        </div>
        <div class="right">
          <view class="flex flex-col items-center">
            <img class="mp-icon" src="https://public-oss-file.zmaxfilm.com/website-compress/zrjt.jpg" alt="图片">
            <span class="tips-text">中瑞集团</span>
          </view>
          <view class="flex flex-col items-center">
            <img class="mp-icon" src="https://public-oss-file.zmaxfilm.com/website-compress/zrxx.jpg" alt="图片">
            <span class="tips-text">中瑞心选</span>
          </view>
          <view class="flex flex-col items-center">
            <img class="mp-icon" src="https://public-oss-file.zmaxfilm.com/website-compress/zmdy.jpg" alt="图片">
            <span class="tips-text">最美电影</span>
          </view>
          <view class="flex flex-col items-center">
            <img class="mp-icon" src="https://public-oss-file.zmaxfilm.com/website-compress/hydy.jpg" alt="图片">
            <span class="tips-text">欢银电影</span>
          </view>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.footer {
  background-color: #fafafa;
  border-top: 1px solid #fafafa;

  .content {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }

  .logo-wrap {
    height: 88px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EEEEEE;

    .logo {
      height: 41px;
      width: 128px;
    }
  }

  .nav {
    display: flex;
    padding: 30px 0;
    justify-content: space-between;

    .left {
      flex: 1;
      gap: 60px;
      display: flex;

      .nav-col {
        gap: 32px;
        display: flex;
        flex-shrink: 0;
        line-height: 1;
        flex-direction: column;

        .nav-text {
          color: #666666;
          font-size: 18px;
          white-space: nowrap;

          &.nav-text--main {
            color: #333333;
            font-size: 22px;
          }
        }
      }
    }

    .right {
      gap: 10px;
      display: flex;

      .mp-icon {
        width: 110px;
        height: 110px;
      }

      .tips-text {
        font-size: 14px;
      }
    }
  }
}
</style>
